<template>
  <!-- 地址 -->
  <div class="list">
    <div class="listBox center" v-for="(item, index) in carList" :key="index">
      <div class="card" style="position: relative">
        <div class="cardTop title aliCenter" style="justify-content: space-between">
          <div>Address</div>
          <div class="aliCenter">
            <div style="cursor: pointer">
              <img
                v-if="item.defaultStatus == 1"
                src="../../../assets/image/my/select.png"
                alt=""
                srcset=""
              />
              <img
                @click="selectDefaultFn(item)"
                v-else
                src="../../../assets/image/my/unSelect.png"
                alt=""
                srcset=""
              />
            </div>
            <div>Defaults</div>
          </div>
        </div>
        <div class="cardContent">
          <el-row>
            <el-col :span="12" class="col size2">
              <div>Name:{{ item.name }}</div>
            </el-col>
            <el-col :span="12" class="col size2">
              <div>Telephone:{{ item.phone }}</div>
            </el-col>
            <el-col :span="24" class="col size2">
              <div>Area:{{ item.region }}</div>
            </el-col>
            <el-col :span="24" class="col size2">
              <div>Detailed Address:{{ item.address }}</div>
            </el-col>
          </el-row>
          <div class="deleteButton">
            <div class="button center" @click="deleteFn(item)" style="background: #ff1f1f">
              Delete
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageButton center" v-if="total > 0">
      <div>
        <el-icon @click="pageFn(-1)" class="ArrowLeftBold" size="50" color="#ffdd00"
          ><ArrowLeftBold
        /></el-icon>
      </div>
      <div>
        <el-icon @click="pageFn(1)" class="ArrowRightBold" size="50" color="#ffdd00"
          ><ArrowRightBold
        /></el-icon>
      </div>
    </div>
    <div class="listBotton center">
      <div class="botton" @click="addVehicleFn">添加</div>
    </div>
  </div>
  <!-- 添加地址 -->
  <el-dialog v-model="dialogVisibleAddressFn" :show-close="false" :before-close="handleClose">
    <div class="AddVehiclenCard">
      <div class="AddVehiclenCardTop aliCenter">New vehicles Added</div>
      <div class="AddVehiclenCardContent">
        <el-form :inline="true" :model="form" label-width="auto">
          <el-form-item label="Name:">
            <el-input class="inpute3" v-model="formData.name" />
          </el-form-item>
          <el-form-item label="Telephone:">
            <el-input class="inpute3" v-model="formData.phone" />
          </el-form-item>
          <el-form-item label="Area:">
            <el-input class="inpute2" v-model="formData.region" placeholder="" />
          </el-form-item>
          <el-form-item label="Detailed Address:">
            <el-input class="inpute2" v-model="formData.address" placeholder="" />
          </el-form-item>
        </el-form>
        <div class="center">
          <div class="cofimButton center" @click="addFn">Confirm</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { addresslist, addressadd, addressdefault, addressdelete } from '@/http/api/myAddress.js'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
let dialogVisibleAddressFn = ref(false)
let formData = reactive({})
let carList = ref([])
const addVehicleFn = () => {
  dialogVisibleAddressFn.value = true
}
const getData = async () => {
  let id = JSON.parse(localStorage.getItem('userInfo')).id
  const res = await addresslist({ id, ...pageData })
  carList.value = res.res
  total.value = res.total
}
const addFn = async () => {
  formData.userId = JSON.parse(localStorage.getItem('userInfo')).id
  const res = await addressadd(formData)
  ElMessage({
    message: res.message,
    type: 'success',
  })
  dialogVisibleAddressFn.value = false
}
let pageData = reactive({
  page: 1,
  size: 10
})
let total = ref(0)
const pageFn = (data) => {
  if (data < 0) {
    if (pageData.page * pageData.size != 10) {
      pageData.page = pageData.page + data == 0 ? 1 : pageData.page + data
      getData()
    }
  } else {
    if (pageData.page * pageData.size <= total.value) {
      pageData.page = pageData.page * pageData.size < total.value ? pageData.page + data : pageData.page
      getData()
    }
  }

}
const selectDefaultFn = async (item) => {
  const res = await addressdefault({
    userId: JSON.parse(localStorage.getItem('userInfo')).id,
    id: item.id
  })
  getData()
}
const deleteFn = async (data) => {
  const res = await addressdelete({ id: data.id })
  ElMessage({
    message: res.message,
    type: 'success',
  })
  getData()
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.pageButton {
  width: 100%;
  margin-top: 20px;
  .storeListRow {
    height: 300px;
    margin-top: 10px;
  }
  .ArrowLeftBold {
    cursor: pointer;
  }
  .ArrowRightBold {
    cursor: pointer;
  }
  .ArrowLeftBold:active {
    color: black;
  }
  .ArrowRightBold:active {
    color: black;
  }
}
.list {
  min-height: 500px;
}
.button {
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: 50px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 22px;
  color: black;
  cursor: pointer;
}
.button:active {
  background: #ffdd00 !important;
}
.listBox {
  width: 100%;
  margin-top: 45px;
  .card {
    width: 1800px;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
    background: #1a1c1d;
    .cardTop {
      height: 100px;
      width: 100%;
      background: #ffdd00;
      padding: 0 20px;
      font-weight: bold;
      color: black;
    }
    .cardContent {
      padding: 0 20px;
      font-size: 24px;
      color: white;
      margin-top: 20px;
    }
  }
}
.listBotton {
  width: 100%;
  .botton {
    width: 170px;
    height: 70px;
    background: #ffdd00;
    font-weight: bold;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: black;
    margin-top: 20px;
  }
  .botton:active {
    background: black;
    color: white;
  }
}
.AddVehiclenCard {
  width: 1800px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1c1d;
  .AddVehiclenCardTop {
    height: 100px;
    width: 100%;
    background: #ffdd00;
    font-size: 24px;
    padding: 0 20px;
    font-weight: bold;
    color: black;
  }
}
.AddVehiclenCardContent {
  padding: 10px;
  .left {
    margin-right: 30px;
    margin-left: 50px;
  }
}
.upImg {
  background: #3c3c3c;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  font-size: 50px;
  cursor: pointer;
}

.imgBox {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .Mask {
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    font-size: 30px;
  }
  .Mask:hover {
    opacity: 0.6;
  }
  cursor: pointer;
}
::v-deep .el-dialog {
  padding: 0;
  border-radius: 20px;
  width: 1800px;
}
::v-deep .el-dialog__header {
  padding: 0;
}
.bakImg {
  width: 800px;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-dialog__body2 {
  width: 800px !important;
}
::v-deep .el-form-item__label {
  font-size: 30px;
  color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ffdd00;
  border: #ffdd00;
}
::v-deep .el-radio__input .is-checked {
  color: white !important;
  font-size: 24px;
}
.col {
  width: 100%;
  height: 40px;
}
::v-deep .el-radio__label {
  color: white !important;
  font-size: 24px;
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
.inpute1 {
  width: 800px;
}
.inpute2 {
  width: 1290px;
}
.inpute3 {
  width: 500px;
}

.cofimButton {
  width: 220px;
  height: 70px;
  background: #ffdd00;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.cofimButton:active {
  background: black;
  color: white;
}
</style>